<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/typelist"
        active
        text="任务管理"
      />
    </nly-breadcrumb>
    <!-- 添加修改任务 -->
    <Modal
      :title="update ? '修改任务' : '添加任务'"
      :styles="{ width: '40%' }"
      v-model="modalAddText"
      class-name="vertical-center-modal"
      :footer-hide="true"
      @on-cancel="cancel"
    >
      <div>
        <Form ref="dataText" :model="dataText" :label-width="120">
          <FormItem label="任务名称" prop="name">
            <Input v-model="dataText.name" placeholder="请输入任务名称" />
          </FormItem>
          <FormItem label="任务需要次数" prop="num">
            <Input v-model="dataText.num" placeholder="请输入任务需要次数" />
          </FormItem>
          <FormItem label="任务类型" prop="taskType">
            <Select
              v-model="dataText.taskType"
              style="width: 200px"
              placeholder="请选择任务类型"
            >
              <Option value="1">累计购买可得</Option>
              <Option value="2">累计抽奖可得</Option>
              <Option value="3">累计消费可得</Option>
              <Option value="4">累计二手交易可得</Option>
              <Option value="5">累计签到可得</Option>
            </Select>
          </FormItem>
          <FormItem
            label="是否会员可领"
            prop="member"
            v-if="dataText.taskType == 5"
          >
            <Select
              v-model="dataText.member"
              style="width: 200px"
              placeholder="请选择是否会员可领"
            >
              <Option value="1">会员可领</Option>
              <Option value="0">普通用户可领</Option>
            </Select>
          </FormItem>
          <FormItem
            label="是否可重复领取"
            prop="repetition"
            v-if="dataText.taskType != 5"
          >
            <Select
              v-model="dataText.repetition"
              style="width: 200px"
              placeholder="请选择是否可重复领取"
            >
              <Option value="1">可重复</Option>
              <Option value="0">不可重复</Option>
            </Select>
          </FormItem>
          <FormItem label="优惠卷" prop="discountsId">
            <Select
              v-model="dataText.discountsId"
              style="width: 200px"
              placeholder="请选择优惠卷"
            >
              <Option
                v-for="(item, index) in accountList"
                :value="item.id"
                :key="index"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="AddText('dataText')">提交</Button>
            <Button @click="ModalClose" style="margin-left: 8px">取消</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- Main content -->
    <section class="content" style="padding: 0px 10px 0px 10px">
      <row>
        <RadioGroup
          v-model="data.repetition"
          @on-change="changeType"
          style="float: left; margin-left: 20px"
        >
          <Radio :label="2" border>全部任务</Radio>
          <Radio :label="0" border>可重复任务</Radio>
          <Radio :label="1" border>不可重复任务</Radio>
        </RadioGroup>
        <i-button
          type="primary"
          style="margin-left: 16px"
          @click="addShow"
          icon="md-add"
          >添加任务</i-button
        >
      </row>
      <div>
        <br />
      </div>
      <Table
        border
        :columns="tableheader"
        :data="datalist"
        :loading="loading"
        @on-selection-change="enterall"
      >
        <template slot-scope="{ row }" slot="taskType">{{
          row.taskType == 1
            ? "累计购买可得"
            : row.taskType == 2
            ? "累计抽奖可得"
            : row.taskType == 3
            ? "累计消费可得"
            : row.taskType == 4
            ? "累计二手交易可得"
            : "累计签到可得"
        }}</template>
        <template slot-scope="{ row }" slot="member">{{
          row.member == 0 ? "普通用户" : "会员"
        }}</template>
        <template slot-scope="{ row }" slot="repetition">{{
          row.repetition == 0 ? "不是" : "是"
        }}</template>
        <template slot-scope="{ row }" slot="action">
          <Button
            style="margin-right: 10px"
            type="primary"
            size="small"
            icon="md-add"
            @click="changeText(row.id, row)"
            >修改</Button
          >
          <Button
            type="error"
            size="small"
            @click="remove(row.id)"
            icon="md-close"
            style="margin-left: 16px"
            >删除</Button
          >
        </template>
      </Table>
      <br />
      <div class="page">
        <Page
          :total="total"
          show-elevator
          show-total
          :page-size="data.pageSize"
          :current="data.page"
          @on-change="changePage"
        />
      </div>
    </section>
  </div>
</template>

<script>
import apis from "@/api/shop1";
export default {
  components: {},
  data() {
    return {
      loading: true,
      modalAddText: false,
      update: false,
      accountList: [],
      tableheader: [
        {
          title: "任务名称",
          key: "name",
          align: "center",
        },
        {
          title: "任务次数",
          key: "num",
          align: "center",
        },
        {
          title: "优惠卷名称",
          key: "discountsId",
          align: "center",
        },
        {
          title: "任务类型",
          slot: "taskType",
          align: "center",
        },
        {
          title: "是否会员可用",
          slot: "member",
          align: "center",
        },
        {
          title: "是否是可重复任务",
          slot: "repetition",
          align: "center",
        },
        {
          title: "操作",
          fixed: "right",
          slot: "action",
          width: 440,
          align: "center",
        },
      ],
      total: 0,
      id: "",
      pageNow: 1,
      datalist: [],
      data: {
        page: 1,
        pageSize: 10,
        repetition: 2,
      },
      dataText: {
        name: "",
        num: 0,
        taskType: 1,
        member:0,
        repetition: "",
        discountsId: "",
      },
      data2: {
        page: 1, //当前页
        pageSize: 1000000, //每页显示个数
        type: 0,
      },
      searchText: "",
      enteralldata: [],
    };
  },
  created() {
    this.getcupponlist();
    this.lookrecord();
  },
  methods: {
    changeType(val) {
      this.data.page = 1;
      this.data.repetition = val;
      this.lookrecord();
    },
    getcupponlist() {
      let that = this;
      apis.getcupponlist(this.data2).then((response) => {
        let resdata = response.data;
        if (resdata.code == 0) {
          console.log(response.data);
          that.accountList = resdata.data.list;
          that.total = resdata.data.total;
        }
      });
    },
    addShow() {
      this.modalAddText = true;
    },
    // 关闭Modal
    ModalClose() {
      this.modalAddText = false;
      this.update = false;
    },
    // 打开修改modal窗口
    changeText(id, data) {
      console.log("打开模态框");
      this.update = true;
      this.dataText.name = data.name;
      this.dataText.num = data.num;
      this.dataText.discountsId = data.discountsId;
      this.dataText.taskType = data.taskType+'';
      this.dataText.member = data.member+'';
      this.dataText.repetition = data.repetition+'';
      this.modalAddText = true;
      this.id = id;
    },
    lookrecord() {
      var _this = this;
      apis
        .getactivelist(this.data)
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            _this.datalist = response.data.data.list;
            _this.total = response.data.data.total;
            this.loading = false;
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("请求失败!");
        });
    },
    // 页码
    changePage(val) {
      console.log(val);
      this.data.page = val;
      this.lookrecord();
      this.loading = false;
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    AddText(name) {
      console.log(name);
      console.log(this.update);
      var that = this;
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.update) {
            this.dataText.id = this.id;
            apis
              .updateactivelist({
                id: this.dataText.id,
                name: this.dataText.name,
                num: this.dataText.num,
                discountsId: this.dataText.discountsId,
                taskType: this.dataText.taskType,
                member: this.dataText.member,
                repetition: this.dataText.repetition,
              })
              .then((response) => {
                if (response.data.code == 0) {
                  this.$Message.success("修改成功");
                  that.lookrecord();
                  this.modalAddText = false;
                  this.update = false;
                  this.$refs.dataText.resetFields();
                } else {
                  this.$Message.error("修改失败");
                }
              });
          } else {
            apis
              .addactivelist({
                name: this.dataText.name,
                num: this.dataText.num,
                discountsId: this.dataText.discountsId,
                taskType: this.dataText.taskType,
                member: this.dataText.member,
                repetition: this.dataText.repetition,
              })
              .then((response) => {
                this.loading = false;
                let resdata = response.data;
                if (resdata.code == 0) {
                  this.$refs.dataText.resetFields();
                  this.modalAddText = false;
                  this.update = false;
                  this.$Message.success("添加成功");
                  that.lookrecord();
                } else {
                  this.$Message.success("添加失败，请稍后重试");
                }
              });
          }
        }
      });
    },
    remove(id) {
      console.log(id);
      let lid = "";
      if (id) {
        lid = id;
      } else {
        this.enteralldata.map((itme) => {
          if (lid == "") {
            lid = itme.id;
          } else {
            lid += "," + itme.id;
          }
        });
      }
      apis
        .deleteactivelist({ id: lid })
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            this.$Message.success("删除成功");
            this.lookrecord();
          } else {
            this.$Message.error("删除失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("删除失败!");
        });
    },
    cancel() {
      this.$refs.dataText.resetFields();
      this.dataText.name = "";
      this.dataText.num = 0;
      this.dataText.discountsId = 0;
      this.dataText.taskType = 1;
      this.dataText.member = 0;
      this.dataText.repetition = 0;
      this.modalAddText = false;
      this.update = false;
    },
  },
};
</script>

<style scoped>
.dataPicker {
  display: inline-block;
  width: 450px;
}
.image {
  max-width: 100%;
  max-height: 100px;
  margin: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  margin: 5px;
}
.page {
  text-align: center;
}
</style>